<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>MZUI</title>
  <link rel="stylesheet" href="dist/css/mzui.min.css">
  <link rel="stylesheet" href="doc/css/doc.min.css">
</head>
<body class='with-heading-top with-nav-top has-index-content'>

  <!-- App bar -->
  <header class="heading primary affix dock-top dock-auto" id="haedNav">
    <nav class="nav" id='headNav'>
      <a href="index.html" class='brand-name' data-page-name="index"><strong>MZUI</strong></a>
      <a data-url="doc/base.html" id="beginLink" data-page-name="base">基础</a>
      <a data-url="doc/element.html" data-page-name="element">控件</a>
      <a data-url="doc/javascript.html" data-page-name="javascript">JS</a>
      <a data-url="doc/examples.html" data-page-name="examples">示例</a>
    </nav>
    <div class="title"></div>
    <nav class="nav">
      <a href="https://github.com/easysoft/mzui/releases" target="_blank" title="更新日志"><i class="icon icon-history"></i></a>
      <a href="https://github.com/easysoft/mzui" target="_blank" title="访问 Github"><i class="icon icon-github"></i></a>
    </nav>
  </header>

  <nav class="affix dock-top nav primary-pale nav-secondary" id="navs">
  </nav>

  <div class="loading loading-light" id="pageLoading"></div>

  <div id="partial" class="container">
    <div id="indexPage">
      <div class="primary text-center" id="leadContent">
        <h1><span class="title">MZUI</span></h1>
        <p class="muted">为移动端设计，基于 Flex 的 UI 框架。</p>
        <div class="space"></div>
        <a class="btn-begin btn outline white">开始使用 &nbsp;<i class="icon-arrow-right"></i></a>&nbsp; 
        <a target="_blank" href="doc/download/mzui-1.0.1-dist.zip" class="btn outline white">立即下载 &nbsp;<i class="icon-download-alt"></i></a>
        <div class="space-sm"></div>
        <p class="small muted">最新版本 v1.0.1 &nbsp; <a target="_blank" href="https://github.com/easysoft/mzui/archive/v1.0.1.zip" target="_blank">下载源码</a></p>
      </div>
      <div class="content white shadow-divider text-center">
        <div class="graph1 flex flex-center has-padding space-sm">
          <div class="avatar circle primary avatar-xl"><small class="code">FLEX</small></div>
          <div class="avatar circle info text-info avatar-xl"><i class="icon icon-mobile"></i></div>
          <div class="avatar circle red text-red avatar-xl"><i class="icon icon-tablet"></i></div>
          <div class="avatar circle primary text-primary avatar-xl"><i class="icon icon-wechat"></i></div>
        </div>
        <h2 class="text-primary lead">现代化</h2>
        <p class="muted">基于 Flex 设计，支持移动端全部主流浏览器<br>支持 Android 微信内置浏览器</p>
      </div>
      <div class="content white shadow-divider text-center">
        <div class="row graph2">
          <div class="cell-4"><div class="tile red">着色</div></div>
          <div class="cell-3"><div class="tile blue">状态</div></div>
          <div class="cell-2"><div class="tile primary">形状</div></div>
          <div class="cell-3"><div class="tile yellow">容器</div></div>
          <div class="cell-2"><div class="tile brown">边距</div></div>
          <div class="cell-3"><div class="tile purple">变形</div></div>
          <div class="cell-3"><div class="tile primary">阴影</div></div>
          <div class="cell-4"><div class="tile dark">滤镜</div></div>
        </div>
        <h2 class="text-yellow lead">灵活</h2>
        <p class="muted">独立的外观选项，适合大部分控件，<br>满足多样的外观定制需求</p>
      </div>
      <div class="content white shadow-divider text-center">
        <div class="graph3 flex flex-center has-padding space-sm">
          <div class="avatar red outline avatar-xl"><small class="code">Gulp</small></div>
          <div class="avatar avatar-xl"><i class="icon icon-bolt muted text-yellow"></i></div>
          <div class="avatar red text-red avatar-xl"><i class="icon icon-wrench"></i></div>
        </div>
        <h2 class="text-red lead">可定制</h2>
        <p class="muted">所有内容可以按需使用，基于 Gulp 构建自定义版本非常简单</p>
      </div>
      <div class="content white text-center">
        <div class="graph3 flex flex-center has-padding space-sm">
          <div class="avatar circle dark outline avatar-xl"><small class="text-dark">jQuery</small></div>
          <div class="avatar avatar-xl"><i class="icon icon-plus muted"></i></div>
          <div class="avatar circle primary outline avatar-xl"><small class="text-dark">MZUI</small></div>
        </div>
        <h2 class="text-primary lead">轻量</h2>
        <p class="muted">JS（mzui.min.js）压缩后在 20KB 左右，<br>CSS（mzui.min.css）压缩后在 76KB 左右，<br>启用 GZip 压缩之后会更小（css 16KB, js 8KB），<br>JS 部分兼容 jQuery 最新版本</p>
      </div>
      <div class="content primary-pale text-center">
        <div class="graph4 flex flex-center space-sm">
          <i class="icon text-info icon-hand-right icon-5x"></i>
        </div>
        <a class="btn-begin btn info">开始使用 &nbsp;<i class="icon-arrow-right"></i></a>&nbsp; 
        <a target="_blank" href="doc/download/mzui-1.0.1-dist.zip" class="btn primary">立即下载 &nbsp;<i class="icon-download-alt"></i></a>
        <div class="space-sm"></div>
        <p class="small muted">最新版本 v1.0.1 &nbsp; <a target="_blank" href="https://github.com/easysoft/mzui/archive/v1.0.1.zip" target="_blank">下载源码</a></p>
      </div>
      <div class="content primary text-center">
        <div class="graph4 flex flex-center">
          <i class="icon icon-comments-alt icon-5x"></i>
        </div>
        <div class="has-padding">
          <p>官方 QQ 群：384135104</p>
          <a href="http://forum.zui.sexy/forum/mzui.html" target="_blank" class="btn outline white">访问论坛</a>
        </div>
      </div>
      <div class="content info text-center">
          <div class="graph4 flex flex-center">
            <i class="icon icon-flag icon-5x"></i>
          </div>
          <div class="has-padding">
            <p>了解需求和计划</p>
            <a href="http://zui.5upm.com/product-browse-1.html" target="_blank" class="btn outline white">访问禅道项目管理系统</a>
          </div>
        </div>
      <div class="content dark text-center">
        <div class="graph4 flex flex-center space-sm">
          <i class="icon icon-github icon-5x"></i>
        </div>
        <div class="has-padding"><a href="https://github.com/easysoft/mzui" target="_blank" class="btn outline white">在 Github 上支持我们 &nbsp;<i class="icon-thumbs-o-up"></i></a> &nbsp; <a href="https://github.com/easysoft/mzui/releases" target="_blank" class="btn outline white">更新日志 &nbsp;<i class="icon icon-history"></i></a></div>
      </div>
      <div class="content primary text-center">
        <div class="graph5 flex flex-center space-sm">
          <span class="path-zui-36" style="margin-right: .5rem"><i class="path-1"></i><i class="path-2"></i></span><span class="large">ZUI</span>
        </div>
        <div class="has-padding-lg">
          <h4 class="lead">桌面浏览器前端解决方案推荐</h4>
          <p class="muted space">一个基于Bootstrap深度定制开源前端实践方案，<br>帮助你快速构现代跨屏应用。</p>
          <a href="http://zui.sexy" target="_blank" class="btn outline white">访问 ZUI 网站 <i class="icon-a"></i></a>
        </div>
      </div>
    </div>
  </div>

  <nav id="fabNav" class="affix dock-bottom dock-left fab has-padding dock-auto shadow-none">
    <a id="tocBtn" class="btn circle primary layer btn-lg"><i class="icon icon-list-ul"></i></a>
  </nav>

  <div class="modal affix enter-from-bottom" id="tocModal">
    <div class="heading divider">
      <div class="title"><i class="icon-list-ul muted"></i> <strong id="tocHeading"></strong></div>
      <nav class="nav">
        <a class="btn" data-dismiss="display"><i class="icon-remove muted"></i></a>
      </nav>
    </div>
    <div class="list" id="tocList"></div>
  </div>

  <script src="dist/lib/jquery/jquery-3.2.1.min.js"></script>
  <!-- MZUI -->
  <script src="dist/js/mzui.js"></script>
  
  <!-- Document UI -->
  <script src="doc/js/doc.min.js"></script>

  <!-- Statistic -->
  <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-53781622-2', 'auto');
  ga('send', {hitType: 'pageview', title: 'MZUI'});
  </script>
</body>
</html>
